import { Meta, Canvas, Story, ArgsTable, Source } from '@storybook/blocks';
import * as ArrayListStories from './ArrayList.stories';

<Meta of={ArrayListStories} />

# ArrayList

The ArrayList is used to input a list of strings. The list is of variable length.

### Description

- Allows to add, remove, and edit items in the list.
- Supports multiline values and custom buttons.

## With list

<Canvas of={ArrayListStories.Default} />

## No list

This will show only the button to add values.

<Canvas of={ArrayListStories.NoList} />

## Multiline value

Allow to use multiline values for the list. This will prevent generating multiple rows for each line.

<Canvas of={ArrayListStories.MultilineValue} />

## Empty Value

<Canvas of={ArrayListStories.EmptyValue} />

## Title and tip

Add cusom title and tip. The second requires a title to be shown.

<Canvas of={ArrayListStories.TitleAndTip} />

## Input label and placeholder

Add a label to the input. Custom value is set with `valueLabel`.

<Canvas of={ArrayListStories.InputLabelAndPlaceholder} />

## Read-only Mode

<Canvas of={ArrayListStories.ReadOnlyMode} />

## Disable add/remove buttons

<Canvas of={ArrayListStories.DisableAddRemoveButtons} />

## Custom buttons text

<Canvas of={ArrayListStories.CustomButtonsText} />

## Default add value

Allow to automatically add default values on new rows.

<Canvas of={ArrayListStories.DefaultAddValue} />

## Loading status

<Canvas of={ArrayListStories.LoadingStatus} />

## Validation

<Canvas of={ArrayListStories.Validation} />

## Slots

### Title Slot

Customize title for complex cases. It requires `title` and will replace its content.

<Canvas of={ArrayListStories.TitleSlot} />

### Column Headers Slot

Customize headers for complex cases. It requires `showHeader` prop to be set to `true`.
  
<Canvas of={ArrayListStories.ColumnHeadersSlot} />

### Columns Slot

<Canvas of={ArrayListStories.ColumnsSlot} />

### Value Slot

<Canvas of={ArrayListStories.ValueSlot} />

### Remove Button Slot

<Canvas of={ArrayListStories.RemoveButtonSlot} />

### Empty Slot

Customize displayed values in case of no value, e.g. custom user friendly images.

<Canvas of={ArrayListStories.EmptySlot} />

### Add Slot

Customize add button with other elements.

<Canvas of={ArrayListStories.AddSlot} />
